<template>
  <el-dialog :visible.sync="value" :before-close="() => $emit('input', false)">
    <template slot="title">
      新增三方支付
    </template>
    <el-form :model="form" ref="refForm" :rules="rules" label-width="180px">
      <el-form-item label="自动出款金额">
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="minAmount"
              :error="minError"
            >
              <el-input
               @keyup.enter.native="doSubmitCheck"
                type="number"
                placeholder="最小金额"
                @change="minAmountChange"
                v-model.number="form.minAmount"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align:center">-</el-col>
          <el-col :span="8">
            <el-form-item
              :error="maxError"
              prop="maxAmount">
              <el-input
                @keyup.enter.native="doSubmitCheck"
                type="number"
                placeholder="最大金额"
                @change="maxAmountChange"
                v-model.number="form.maxAmount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-tip>用户提款额达到此区间，则触发自动出款</el-tip>
      </el-form-item>
      <el-form-item label="三方支付名称" prop="channelId">
        <el-select v-model="form.channelId" @change="escrowPlatformChange">
          <el-option
            v-for="o in escrowPlatformList"
            :label="o.channelName"
            :value="o.channelId"
            :key="o.channelId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商户号" prop="merchantId">
        <el-select v-model="form.merchantId">
          <el-option
            v-for="item in shopNoList"
            :label="item.merchantCode"
            :value="item.merchantId"
            :key="item.merchantId"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-col :span="16">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-col>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('input', false)" :loading="loading">取 消</el-button>
      <el-button type="primary" @click="doSubmitCheck" :loading="loading">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>

import { getEscrowShopNoList, getPaymentManageChannelList } from '@/services/api/recharge';
import { editWithdrawEscrow } from '@/services/api/withdraw';

import { form, factory } from '@/build';

export default {

  name: 'escrows-dialog',

  props: ['value', 'id', 'rowData'],

  mixins: [form, factory],

  data() {
    return {
      shopNoList: [],
      escrowPlatformList: [],
      merchantList: [],
      form: {
        id: this.id,
        merchantId: undefined,
        minAmount: undefined,
        maxAmount: undefined,
        channelId: undefined,
        remark: undefined,
      },
      applyData: {},
      rules: {
        minAmount: factory.getRule('money'),
        maxAmount: factory.getRule('money'),
        merchantId: [
          { required: true, message: '商户号为必选项' },
        ],
        channelId: [
          { required: true, message: '三方平台为必选项' },
        ],
        effectPlatform: [
          { required: true, message: '应用端为不能为空' },
        ],
      },
      minError: '',
      maxError: '',
    };
  },

  methods: {
    escrowPlatformChange(val) {
      // this.form.merchantId = undefined
      getEscrowShopNoList({ channelId: val }).then(([result, data]) => {
        if (result) {
          this.shopNoList = data.list;
        }
      });
    },

    minAmountChange() {
      this.minError = '';
      if (this.form.minAmount > this.form.maxAmount) {
        this.minError = '最小值不能大于最大值';
      }
    },

    maxAmountChange() {
      this.maxError = '';
      if (this.form.maxAmount < this.form.minAmount) {
        this.maxError = '最大值不能小于最小值';
        return false;
      }
      return true;
    },
    doSubmitCheck() {
      if (this.maxAmountChange()) {
        this.doSave({ action: 'saveForm', form: 'refForm' });
      }
    },
  },
  mounted() {
    this.bindSave(editWithdrawEscrow, 'saveForm', 'form', {
      afterSuccess: () => {
        this.$emit('input', false);
        this.$parent.gridSearch();
      },
    });
    if (this.rowData) {
      this.form = { ...this.rowData };
      this.bindGet(getEscrowShopNoList, 'shopNoList', {
        sendingData: { channelId: this.form.channelId },
        format: data => data.list,
      });
    }

    this.bindGet(getPaymentManageChannelList, 'escrowPlatformList');
    this.getAll();
  },
};
</script>

<style scoped>
</style>
